<template lang="jade">
  .detail-info
    .product-detail
      .commodityImgs
        .product-item(v-for='item in infoData.commodityImgs',:style='{order:item.sequenceNumber}')
          img(:src='getProductPic(item.imgUrl)')
      .brandImgs
        .product-item(v-for='item in infoData.brandImgs',:style='{order:item.sequenceNumber}')
          img(:src='getProductPic(item.imgUrl)')
      .companyImgs
        .product-item(v-for='item in infoData.companyImgs',:style='{order:item.sequenceNumber}')
          img(:src='getProductPic(item.imgUrl)')
</template>

<script>
import URLS from '@/config/urls';

export default {
  props: {
    infoData: {
      type: Object,
      required: true,
      default: {}
    }
  },
  methods: {
    getProductPic( url ) {
      return this.infoData.pic ? URLS.BaseURL + url : '';
    }
  }
};
</script>

<style lang="stylus" scoped>
  .detail-info
    overflow: hidden
    .product-detail
      .commodityImgs
      .brandImgs
      .companyImgs
        display flex
        flex-direction column
        align-items center
        .product-item
          display: flex
          justify-content: center
</style>
